<template>
  <el-dialog
    title='添加部门'
    :visible.sync="dialogVisible"
    @opened="dialogOpen"
  >
    <el-form
      ref="form"
      :model="form"
      label-width="80px"
      size="small"
    >

      <el-row>
        <el-col :span="12">
          <el-form-item
          prop="name"
          label="部门名称"
          >
            <el-input v-model="form.name"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item
          prop="note"
          label="备注"
          >
            <el-input v-model="form.note"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-form-item
        prop="depid"
        label="上级部门"
      >
       <tree-select ref="treeSelect" @change="changeParent"/>
      </el-form-item>

      <el-row>
        <el-col :span="4">
          <el-form-item
          prop="deplrole"
            label="部门角色"
          >
          </el-form-item>
        </el-col>
        <el-col :span="18">
            <!-- <el-checkbox-group  :value="mpb.id" v-for="mpb in mb.permissionBeans" :key="mpb.id" v-model="checkList" class="checkgroup" >
            <el-checkbox :label="mpb.name" @change="checkinlist"></el-checkbox>
            </el-checkbox-group> -->
        </el-col>
      </el-row>

      <el-form-item>
        <el-button
          type="primary"
          :loading="loading"
          @click="saveUser"
        >保存</el-button>
        <el-button @click="close">取消</el-button>
      </el-form-item>
    </el-form>

  </el-dialog>

</template>
<script>
import deptApi from "@/api/system/dept";
import utils from '@/assets/utils/zhzf-util';
import TreeSelect from "../../comps/zhzf/tree-select";
export default {
  name: "deptAddForm",
  components: { TreeSelect},
  props: {
    value: Boolean,
    pid:Object
  },
  data() {
    return {
      loading: false,
      dialogVisible: false,
      form: {
        name: "",
        pid: "",
        note: "",
        delFlag:null,
        createdDatetime:'',
        updateDatetime:'',
        depid:'',
        deplrole:''
      },
      treeselectVisible:false,
      isClearable:true,      // 可清空（可选）
      isAccordion:true,      // 可收起（可选）
      initvalue:'',            // 初始ID（可选）
      props:{                // 配置项（必选）
        value: 'id',
        label: 'name',
        children: 'children',
        // disabled:true
      },
      // 选项列表（必选
      treeList:[]
    };
  },
  watch: {
    value(val) {
      this.dialogVisible = val;
    },
    dialogVisible(val) {
      this.$emit("input", val);
    }
  },
  methods: {
    dialogOpen() {//父组件传过来的当前列数据
      this.$refs.form.resetFields();
      this.form.pid = this.pid.name;
      this.$refs.treeSelect.initPage(
          this.treeList,
          {label: this.form.pname, value: this.form.pid}
        );
    },
    changeParent(item) {
        this.form.pid = item.value;
      },
     getTableData(treeList) {
        this.treeList = treeList;
      },
    saveUser() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          this.loading = true;
          var time = new Date();
          this.form.code = '000';
          this.form.status = '000';
          this.form.type = '0';
          this.form.modifyTime = time.getTime();
          this.form.updateDatetime = time.getTime();
          this.form.createdDatetime = time.getTime();
          deptApi
            .addDept({ ...this.form,})
            .then(data => {
              this.loading = false;
              this.dialogVisible = false;
              this.$emit("submit");
            });

        } else {
          return false;
        }
      });
    },
    close() {
      this.$refs["form"].resetFields();
      this.dialogVisible = false;
    }
  }
};
</script>

